<!DOCTYPE html>
<html>
    <head>
        <title>dnd5ebuy</title>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
        />
        <style>
            * {
                padding: 0;
                margin: 0;
                font-size: 4rem;
            }
            .f-r {
                display: flex;
                flex-direction: row;
            }
            .f-c {
                display: flex;
                flex-direction: column;
            }
            .j-c {
                justify-content: center;
            }
            .j-s-b {
                justify-content: space-between;
            }
            .a-c {
                align-items: center;
            }
            .a-s-b {
                align-items: space-between;
            }
            input {
                width: 12rem;
                text-align: center;
            }
            input.value {
                border: unset;
                background: unset;
                width: 6rem;
            }
            .lable {
                padding: 1rem;
                display: flex;
                align-items: center;
            }
            .lable > * {
                margin-right: 1rem;
            }
            .lable > *:last-child {
                margin-right: 0;
            }
            .add,
            .sub,
            .copy {
                border: 1px solid;
                width: 4rem;
                height: 4rem;
                position: relative;
            }
            .add::before,
            .sub::before {
                content: "";
                background: black;
                position: absolute;
                top: 49%;
                bottom: 49%;
                left: 10%;
                right: 11%;
            }
            .add::after {
                content: "";
                background: black;
                position: absolute;
                left: 49%;
                right: 49%;
                top: 10%;
                bottom: 11%;
            }
            th,
            td {
                padding: 1rem;
                text-align: center;
            }
            body {
                background: #eee;
            }
            #app {
                margin: 0 auto;
                width: 100vw;
                max-width: 750px;
                background: #fff;
                min-height: 100vh;
                padding: 1rem;
            }
        </style>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.33/vue.global.prod.min.js"
            integrity="sha512-J5rsLpdUqLDqN3r5s2cxH1eCp4DLSX4sNLhl3FGiI+10kFhO0Qb/LIul9eFowKe3H+J+b1jNjCUB0VTVjkv7pg=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>
    </head>
    <body>
        <div id="app">
            <div class="f-r">
                <div>
                    <div class="lable">
                        <div>购点总数</div>
                        <input type="number" v-model="total" />
                    </div>
                    <div class="f-r">
                        <div class="lable">
                            <div>已用</div>
                            <input disabled class="value" v-model="cost" />
                        </div>
                        <div class="lable">
                            <div>未用</div>
                            <input disabled class="value" v-model="left" />
                        </div>
                    </div>
                    <div class="f-c">
                        <template v-for="item, key in attribute">
                            <div class="lable">
                                <div>{{item.label}}</div>
                                <input type="number" v-model="item.value" />
                                <div class="add" @click="add(key)"></div>
                                <div class="sub" @click="sub(key)"></div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="lable" style="margin-left: 2rem">
                    <table border="1" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th>属性</th>
                                <th>价格</th>
                                <th>累计</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for="item, key in price">
                                <tr>
                                    <td>{{key}}</td>
                                    <td v-if="key <16">{{item}}</td>
                                    <td v-else>
                                        <input
                                            type="number"
                                            v-model="price[key]"
                                        />
                                    </td>
                                    <td>{{prices[key]}}</td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="lable">
                <input type="number" v-model="n" />
                <div>次dnd</div>
                <input type="number" v-model="m" />
                <div>换算购点平均</div>
                <div>{{r}}</div>
                <button @click="run" v-show="n > 0 && m > 0">计算</button>
            </div>
        </div>
        <script>
            const resize = () => {
                let width = window.innerWidth
                if (width > 750) {
                    width = 750
                }
                document.getElementsByTagName("html")[0].style.fontSize =
                    width / 100 + "px"
            }
            resize()
            window.onresize = resize
            window.onload = resize
            const sum = (a) => {
                let s = 0
                for (let i in a) {
                    s += a[i]
                }
                return s
            }
            const rd = (n) => {
                return Math.floor(Math.random() * n) + 1
            }
            const r4d6k3 = () => {
                let s = 0
                let min = rd(6)
                let r
                for (let i = 0; i < 3; i++) {
                    r = rd(6)
                    if (r >= min) {
                        s += r
                    } else {
                        s += min
                        min = r
                    }
                }
                return s
            }
            const vue = Vue.createApp({
                data() {
                    return {
                        total: 27,
                        attribute: {
                            strength: {
                                label: "力量",
                                value: 8,
                            },
                            dexterity: {
                                label: "敏捷",
                                value: 8,
                            },
                            constitution: {
                                label: "体质",
                                value: 8,
                            },
                            intelligence: {
                                label: "智力",
                                value: 8,
                            },
                            wisdom: {
                                label: "感知",
                                value: 8,
                            },
                            charisma: {
                                label: "魅力",
                                value: 8,
                            },
                        },
                        price: {
                            3: -1,
                            4: -1,
                            5: -1,
                            6: -1,
                            7: -1,
                            8: 0,
                            9: 1,
                            10: 1,
                            11: 1,
                            12: 1,
                            13: 1,
                            14: 2,
                            15: 2,
                            16: 3,
                            17: 3,
                            18: 4,
                        },
                        n: 1000,
                        m: 1,
                        r: "",
                    }
                },
                computed: {
                    prices() {
                        const prices = {}
                        for (let i in this.price) {
                            prices[i] = 0
                            for (
                                let j = Math.min(i, 8);
                                j <= Math.max(i, 8);
                                j++
                            ) {
                                prices[i] += this.price[j] || 0
                            }
                        }
                        return prices
                    },
                    cost() {
                        let cost = 0
                        for (let i in this.attribute) {
                            cost += this.prices[this.attribute[i].value] || 0
                        }
                        return cost
                    },
                    left() {
                        return this.total - this.cost
                    },
                },
                methods: {
                    add(key) {
                        const attribute = this.attribute[key]
                        if (attribute.value < 18) {
                            attribute.value += 1
                        }
                    },
                    sub(key) {
                        const attribute = this.attribute[key]
                        if (attribute.value > 8) {
                            attribute.value -= 1
                        }
                    },
                    run() {
                        const d = []
                        for (let i = 0; i < this.n; i++) {
                            d[i] = 0
                            for (let j = 0; j < this.m; j++) {
                                let t = 0
                                for (let k = 0; k < 6; k++) {
                                    t += this.prices[r4d6k3()]
                                }
                                if (t > d[i]) {
                                    d[i] = t
                                }
                            }
                        }
                        this.r = sum(d) / d.length
                    },
                },
            }).mount("#app")
        </script>
    </body>
</html>
